<template>
    <!-- 控制外层盒子 可以调整样式 目前方便展示用的flex布局 -->
    <div class="control-box">
      <div class="login-main">
        <div class="login-title">账号登录</div>
        <div class="login-text-css">四川省XXXXXXXXXXXXXXX平台</div>
        <el-form label-position="top" label-width="auto" ref="formRef" size="large" :model="formData" :rules="fromRules"
          class="width_css">
          <el-form-item label="账号" prop="username">
            <el-input v-model.number="formData.username" class="width_css" placeholder="请输入" clearable maxlength="20" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" class="width_css" type="password" show-password placeholder="请输入"
              clearable maxlength="20" />
          </el-form-item>

          <div class="imgbox">
            <el-form-item label="验证码" prop="code" class="jscss">
              <el-input :clearable="true" v-model="formData.code" auto-complete="off" placeholder="请输入"> </el-input>
            </el-form-item>
            <div class="imgcss"><img class="img_css" src="@/assets/images/verification.png" /></div>
          </div>

          <div class="login-btn">
            <el-button type="primary" @click="loginBtn" class="width_css longin_css">登录</el-button>
          </div>
          <div class="login-check">
            <div class="left-box"><el-checkbox v-model="isChecked" size="large"
                @change="checkedChange">记住密码</el-checkbox></div>
            <!-- 找回密码注册账号 是预留位置 暂时不做具体细节  -->
            <div class="right-box">
              <div class="right-box-pws" @click="retrievePws">找回密码</div>
              <div class="right-box-acc" @click="registerAcc">注册账号</div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
 

</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const router = useRouter()

const isChecked = ref(false)
const formRef = ref(null)
const formData = ref({})
const yzImg = ref('@/assets/images/verification.png')
const fromRules = reactive({
  username: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur'
    }
  ]
})
const checkedChange = () => { }
const retrievePws = () => { }
const registerAcc = () => { }
const loginBtn = async (type) => {
  if (!formRef.value) return
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      console.log('登录')
    }
  })
}

onMounted(() => { })
</script>

<style lang="scss" scoped>
  :deep(.el-form-item__label)  {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: rgba(0, 0, 0, 0.9);
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.control-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  // background-color: #f0f0f0;

  .login-main {
    width: 400px;
    height: 554px;
    display: flex;
    background-color: white;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    padding: 32px 38px;
    box-shadow: var(--el-box-shadow-dark);
    border-radius: 5px;

    .width_css {
      width: 100%;
    }

    .imgbox {
      // height: 72px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: start;

      .jscss {
        // width: 302px;
        width: 81%;
        //width: calc(100% - 79px);
      }

      .imgcss {
        // flex-grow: 1;
        // width: 79px;
        height: 40px;
        margin-left: 17px;
        margin-top: 9px;
        line-height: 40px;

        .img_css {
          width: 100%;
          height: 40px;
        }
      }
    }

    .longin_css {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20px !important;
      color: #ffffff;
      line-height: 23px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .login-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26px;
      color: #333333;
      line-height: 30px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-bottom: 12px;

      .text_css {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        line-height: 24px;
        font-style: normal;
        text-transform: none;
      }
    }

    .login-text-css {
      height: 26px;
      margin-bottom: 36px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.4);
      line-height: 26px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .login-name {
      font-size: 16px;
      margin: 10px 0 30px;
    }

    .login-check {
      display: flex;
      margin-top: 32px;
      align-items: center;
      justify-content: space-between;

      .right-box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .right-box-pws {
          cursor: pointer;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #2563eb;
          line-height: 16px;
          // text-align: left;
          font-style: normal;
          text-transform: none;
          margin-right: 18px;
        }

        .right-box-acc {
          cursor: pointer;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #2563eb;
          line-height: 16px;
          font-style: normal;
          text-transform: none;
        }
      }
    }

    .login-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 60px;
    }
  }
}
</style>
